﻿<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">   
		<title></title>
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/lesson_apply.css"/>
	<script src="js/init.js"></script>		
	</head>
	<body>
		<img src="img/search.png" class="diff-pic"/>
		<div class="header bg-orange font30">
			<input type="text" class="header_search pr"/>
		</div>
		<div class="bg-orange select_menu">
			<div class="wid33 pr">
				<div class="wrap">
					<span class="fl white font24">上课名称</span>
					<img src="img/select_down.png" class="fr down"/>
					<div class="clear"></div>
				</div>
				<div class="pa down_list wid100" style="margin: -1.25rem 0 0 0;">
					<select class="font24">
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
				</div>
			</div>
			<div class="wid33 pr">
				<div class="wrap">
					<span class="fl white font24">上课时间</span>
					<img src="img/select_down.png" class="fr down"/>
					<div class="clear"></div>
				</div>
				<div class="pa down_list wid100" style="margin: -1.25rem 0 0 0;">
					<select class="font24">
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
				</div>
			</div>
			<div class="wid33 pr">
				<div class="wrap">
					<span class="fl white font24">上课地点</span>
					<img src="img/select_down.png" class="fr down"/>
					<div class="clear"></div>
				</div>
				<div class="pa down_list wid100" style="margin: -1.25rem 0 0 0;">
					<select class="font24">
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
				</div>
			</div>
			<div class="clear"></div>
		</div>	
		<div class="lesson_list">
			<div class="lesson">
				<div class="lesson_name">
					<span class="fl font30">课程名称</span>
					<a href="javascript:void(0);" class="fr font20">报名</a>
					<p class="clear"></p>
				</div>
				<p class="font26"><span>老师：</span>老师</p>
				<p class="font26"><span>教授：</span>教授</p>
				<p class="date mt15 font20"><img src="img/time.png" class="time mr30"/>Apr,03,2016</p>
			</div>
		</div>
		<div class="lesson_list">
			<div class="lesson">
				<div class="lesson_name">
					<span class="fl font30">课程名称</span>
					<a href="javascript:void(0);" class="fr font20">报名</a>
					<p class="clear"></p>
				</div>
				<p class="font26"><span>老师：</span>老师</p>
				<p class="font26"><span>教授：</span>教授</p>
				<p class="date mt15 font20"><img src="img/time.png" class="time mr30"/>Apr,03,2016</p>
			</div>
		</div>
		<div class="lesson_list">
			<div class="lesson">
				<div class="lesson_name">
					<span class="fl font30">课程名称</span>
					<a href="javascript:void(0);" class="fr font20">报名</a>
					<p class="clear"></p>
				</div>
				<p class="font26"><span>老师：</span>老师</p>
				<p class="font26"><span>教授：</span>教授</p>
				<p class="date mt15 font20"><img src="img/time.png" class="time mr30"/>Apr,03,2016</p>
			</div>
		</div>
		<div class="lesson_list">
			<div class="lesson">
				<div class="lesson_name">
					<span class="fl font30">课程名称</span>
					<a href="javascript:void(0);" class="fr font20">报名</a>
					<p class="clear"></p>
				</div>
				<p class="font26"><span>老师：</span>老师</p>
				<p class="font26"><span>教授：</span>教授</p>
				<p class="date mt15 font20"><img src="img/time.png" class="time mr30"/>Apr,03,2016</p>
			</div>
		</div>
		<div class="modal d-n">
			<div class="apply-box white">
				报名成功
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
	<script>
		$(function(){
			//报名按钮
			$('.lesson_name a').bind('click',function(){
				if(this.innerText == '报名'){
					$(this).css({'color':'#ec5d2f','border':'1px solid #ec5d2f'}).html('已报名');
					$('.modal').show().bind('click',function(){
						$(this).hide();
					});
				}else{
					$(this).css({'color':'#aaa','border':'1px solid #aaa'}).html('报名');
				}				
			});	
			
			//下拉选择打印
			$('select').bind('click',function(){
				var span = $(this).parent().prev().find('span');
				$(this).click(function(){
					span.html($(this).val());
				});
			});
		});
	</script>
</html>
